<template>
  <k-view class="search-input flex-center">
    <k-view class="search-input-icon"></k-view>
    <k-input
      class="search"
      cursor-color="#FA3B32"
      :clearable="clearable"
      :placeholder="placeholder"
      v-bind="$attrs"
      v-on="$listeners"
      ref="search"
      @change="change"
      @clear="clear"
    ></k-input>
  </k-view>
</template>

<script>
import { debounce } from '../../utils/index';

// 缺少自动聚焦功能
export default {
  name: 'SearchInput',
  inheritAttrs: false,
  props: {
    placeholder: {
      type: String,
      default: '',
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    change: debounce(function (e) {
      let value = e.target.value;
      this.$emit('change', e);
      this.$emit('on-change', value);
    }),
    clear() {
      this.$emit('on-clear');
    },
  },
};
</script>

<style lang="less" scoped>
.search-input {
  width: 100%;
  height: 56px;
  padding-left: 16px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;

  [theme-mode='black'] & {
    background: rgba(255, 255, 255, 0.06);
  }

  &-icon {
    width: 32px;
    height: 32px;
    background-image: url('../../assets/index/search-icon.png');
    background-size: 100% 100%;
  }

  .search {
    width: calc(100% - 44px);
    height: 100%;
    font-size: 28px;
    background: transparent;
    letter-spacing: 0;
    font-weight: 400;
    border: none;
  }

  /deep/.kfc-input__label {
    color: rgba(0, 0, 0, 0.84);

    [theme-mode='black'] & {
      color: rgba(255, 255, 255, 0.84);
    }
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
